import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import { connect, Provider } from 'react-redux';
import configureStore from './store/store';
import { increment, decrement, asyncChangeAge } from './store/action';

const store = configureStore();

function App(props) {
  console.log('props: ', props);

  useEffect(() => {
    document.title = 'redux demo';
  }, []);

  return (
    <>
      <WingBlank>
        <div>
          My name is {props.name}, My age is{' '}
          <h2 style={{ display: 'inline-block' }}>{props.age}</h2>
        </div>
      </WingBlank>
      <Button type="primary" onClick={props.increment}>
        加
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={props.decrement}>
        减
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.asyncChangeAge(2)}>
        async add
      </Button>
      {/* <Button type="primary" onClick={() => props.dispatch(increment())}>
        加
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.dispatch(decrement())}>
        减
      </Button>
      <WhiteSpace size="sm" />
      <Button type="primary" onClick={() => props.dispatch(asyncChangeAge(2))}>
        async add
      </Button> */}
    </>
  );
}

const mapStateToProps = (state) => {
  const { counterReducer } = state;
  return counterReducer;
};

const mapDispatchToProps = (dispatch) => {
  return { dispatch };
};

// connect函数第二个参数可以是dispatch（函数），可以是action（对象），
// 若是action对象的话，redux内部需要经过bindActionCreator处理一下，
// 如果是dispatch函数的话直接 dispatch(action)
// 最终都是return (...agrs) => dispatch(action(...args)) 这种结构

// action是对象
App = connect(mapStateToProps, { increment, decrement, asyncChangeAge })(App);

// action是函数
// App = connect(mapStateToProps, mapDispatchToProps)(App);

function RootEle() {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
}

ReactDOM.render(<RootEle />, document.getElementById('root'));
